<template>
  <div class="register-container">
    <div class="register-box" v-if="registerFlag">
      <h3 class="register-title">
        <i class="fa fa-user-plus"></i> 用户注册
      </h3>

      <div class="input-group">
        <label for="username">
          <i class="fa fa-user"></i> 用户名
        </label>
        <input type="text" id="username" v-model="user.username" placeholder="请设置用户名" />
      </div>

      <div class="input-group">
        <label for="phone">
          <i class="fa fa-phone"></i> 手机号
        </label>
        <input type="tel" id="phone" @blur="checkPhone" v-model="user.phone" placeholder="请输入手机号" />
      </div>

      <div class="input-group">
        <label for="email">
          <i class="fa fa-envelope"></i> 邮箱
        </label>
        <input type="email" id="email" v-model="user.email" placeholder="请输入邮箱" />
      </div>

      <div class="input-group">
        <label for="password">
          <i class="fa fa-lock"></i> 密码
        </label>
        <input type="password" id="password" v-model="user.password" placeholder="请设置密码" />
      </div>

      <div class="input-group">
        <label for="confirm-password">
          <i class="fa fa-lock"></i> 确认密码
        </label>
        <input type="password" id="confirm-password" v-model="confirmPassword" placeholder="请确认密码" />
      </div>

      <button class="register-btn" type="button" @click="register">
        <i class="fa fa-check"></i> 注册
      </button>

      <div class="login-link">
        已有账号？<router-link to="/login">去登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'RegisterView',
  data() {
    return {
      user: {
        username: '',
        phone: '',
        email: '',
        password: '',
        userType: '0'
      },
      confirmPassword: '',
      registerFlag: true
    }
  },
  methods: {
    validateForm() {
      if (!this.user.username || !this.user.password || !this.user.email ||
          !this.user.userType || !this.user.phone || !this.confirmPassword) {
        alert("请填写完整信息！");
        // this.registerFlag = false;
        return false;
      }

      if (this.user.password !== this.confirmPassword) {
        alert("两次密码不一致！");
        // this.registerFlag = false;
        return false;
      }

      this.registerFlag = true;
      return true;
    },

    checkPhone() {
      if (!this.user.phone) return;

      axios.get('/api/user/checkPhone?phone=' + this.user.phone)
          .then(response => {
            if (response.data === 'success') {
              alert("该手机号已经被注册！");
              this.registerFlag = false;
            } else {
              this.registerFlag = true;
            }
          })
          .catch(error => {
            console.error('手机号验证失败:', error);
            this.registerFlag = false;
          });
    },

    register() {
      if (this.validateForm()) {
        this.checkPhone();

        if (this.registerFlag) {
          console.log('发送注册请求，user:', this.user);
          console.log('confirmPassword:', this.confirmPassword);

          axios.post('/api/user/register', {
                users: this.user,
                confirmPassword: this.confirmPassword
              }, {
                headers: {
                  'Content-Type': 'application/json'
                }
              }
          ).then(response => {
            if (response.status === 200) {
              alert("注册成功,请登录！");
              this.$router.push('/login');
            } else {
              alert(response.data || "注册失败，请重试！");
            }
          }).catch(error => {
            console.log('注册请求失败:', error);
            if (error.response && error.response.status === 500) {
              alert("服务器内部错误，请稍后重试");
            } else {
              alert("注册请求失败，请稍后重试");
            }
          });
        }
      }
    }
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  background-image: url('../../assets/user/1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.register-box {
  width: 100%;
  max-width: 400px;
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.register-title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.input-group {
  margin-bottom: 20px;
  display: flex;          /* 使用Flex布局 */
  align-items: center;    /* 垂直居中 */
}

.input-group label {
  display: flex;          /* 使图标和文字在标签内水平排列 */
  align-items: center;    /* 图标和文字垂直居中 */
  width: 100px;           /* 固定标签宽度 */
  margin-bottom: 0;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.input-group i {
  margin-right: 8px;       /* 图标与文字间距 */
  color: #409eff;         /* 图标颜色与主色调一致 */
}

.input-group input {
  flex: 1;                /* 输入框占据剩余空间 */
  padding: 12px 15px;      /* 调整内边距，使布局更适中 */
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.input-group input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.register-btn {
  display: flex;          /* 使图标和文字在按钮内水平排列 */
  align-items: center;    /* 图标和文字垂直居中 */
  justify-content: center;/* 内容居中 */
  width: 100%;
  padding: 14px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
  gap: 8px;               /* 按钮图标与文字间距 */
}

.register-btn:hover:not([disabled]) {
  background-color: #66b1ff;
}

.register-btn:disabled {
  background-color: #c0ccda;
  cursor: not-allowed;
}

.login-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

.login-link a {
  color: #409eff;
  text-decoration: none;
  transition: color 0.3s;
}

.login-link a:hover {
  text-decoration: underline;
}
</style>